<template>
    <div>
        <!-- 头部 -->
        <div class="header flex align-center justify-between">
            <router-link to="/my">
                <van-icon name="arrow-left" color="#a36663" size="22" />
            </router-link>
            <p class="fs-28 color-main">我的收货地址</p>
            <van-icon name="shopping-cart" color="#a36663" size="22" />
        </div>

        <!-- 内容部分 -->
        <div class="main">
            <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="onAdd"
                @edit="onEdit" />
        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import store from '../../store';
import { useRouter } from 'vue-router';
let router = useRouter()
const chosenAddressId = ref('1');

let list = computed(() => {
    return store.state.address.addressList
})
chosenAddressId.value = list.value[0].id

const onAdd = () => {
    router.push({
        path:'/addaddress',
        query:{
            idx:-1
        }
    })
};
const onEdit = (item, index) => {
    router.push({
        path:'/addaddress',
        query:{
            idx:index
        }
    })
}
</script>

<style lang="less" scoped>
// 头部
.header {
    height: 9.8rem;
    background-color: #fff;
    padding: 0 2.1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -2px 10px #ccc;
    z-index: 10;
}

// 内容部分
.main {
    padding-top: 9.8rem;
    overflow: hidden;
}

:deep(.van-address-item .van-radio__icon--checked .van-icon) {
    background-color: #a36663;
    border-color: #a36663;
}

:deep(.van-tag--danger) {
    background-color: #a36663;
}

:deep(.van-button--danger) {
    background-color: #492321;
    border-color: #a36663;
    height: 12rem;
    border-radius: 0;
}

:deep(.van-address-list__bottom) {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

:deep(.van-address-list__add) {
    margin: 0;
}
</style>